<template>
  <div class="ApplicationForm">
    <div class="ApplicationForm-search">
      <span class="ApplicationForm-search-span-ls">|</span>
      <span class="ApplicationForm-search-span">申请单</span>
    </div>
    <div class="ApplicationForm-table">
      <div class="button">
        <el-button size="default" :icon="CirclePlus" @click="onOpenAddRole('add')" type="primary"> 新增 </el-button>
      </div>
      <div class="ApplicationForm-table-ls left-project">
        <pure-table
          ref="tableRef"
          :row-key="row => row.tid"
          adaptive
          border
          align-whole="center"
          show-overflow-tooltip
          :data="tableData"
          :columns="columns"
          class="pure-table"
          highlight-current-row
          @row-click="tableDataClick"
        >
          <template #caoZuo="scope">
            <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
              <el-button type="primary" link :icon="EditPen" @click="onOpenEditRole('edit', scope.row)"></el-button>
            </el-tooltip>

            <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
              <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </pure-table>
      </div>
    </div>
    <DialogForm ref="dialogRef" @refresh="getTableData()" />
  </div>
</template>
<script setup lang="ts">
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { useColumns } from "@/views/DataMaintenance/IntegratedProject/components/ApplicationForm/columns";
import { defineAsyncComponent } from "vue";
const DialogForm = defineAsyncComponent(
  () => import("@/views/DataMaintenance/IntegratedProject/components/ApplicationForm/dialogForm.vue")
);
const { columns, tableData, deleteAccount, onOpenAddRole, onOpenEditRole, getTableData, tableDataClick, tableRef, dialogRef } =
  useColumns();
</script>
<style scoped lang="scss">
.ApplicationForm {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  .ApplicationForm-search {
    height: 25px;
    padding: 10px 20px;
    background: white;
    .ApplicationForm-search-span-ls {
      font-size: larger;
      font-weight: 900;
      line-height: 0;
      color: #239487;
    }
    .ApplicationForm-search-span {
      margin-left: 5px;
      color: #239487;
    }
  }
  .ApplicationForm-table {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 10px 20px;
    margin-top: 8px;
    background: white;
    .ApplicationForm-table-ls {
      display: flex;
      flex: 1;
      margin-top: 10px;
      .pure-table {
        flex: 1;
      }
    }
  }
}
</style>
